<template>
	<view class="steps-item" :class="[`steps-item--${parentData.direction}`]">
		<view class="steps-item__line" v-if="index + 1 < childLength"
			:class="[`steps-item__line--${parentData.direction}`]" :style="[lineStyle]"></view>
		<view class="steps-item__wrapper"
			:class="[`steps-item__wrapper--${parentData.direction}`, parentData.dot && `steps-item__wrapper--${parentData.direction}--dot`]">
			<slot name="icon">
				<view class="steps-item__wrapper__dot" v-if="parentData.dot" :style="{
						backgroundColor: statusColor
					}">
				</view>
				<view class="steps-item__wrapper__icon" v-else-if="parentData.activeIcon || parentData.inactiveIcon">
					<text
						class="steps-item__wrapper__icon__text">{{ index <= parentData.current ? parentData.activeIcon : parentData.inactiveIcon }}</text>
				</view>
				<view v-else :style="{
						backgroundColor: statusClass === 'process' ? parentData.activeColor : 'transparent',
						borderColor: statusColor
					}" class="steps-item__wrapper__circle">
					<text v-if="statusClass === 'process' || statusClass === 'wait'"
						class="steps-item__wrapper__circle__text" :style="{
							color: index == parentData.current ? '#ffffff' : parentData.inactiveColor
						}">{{ index + 1}}</text>
					<text v-else
						class="steps-item__wrapper__circle__icon">{{ statusClass === 'error' ? '×' : '√' }}</text>
				</view>
			</slot>
		</view>
		<view class="steps-item__content" :class="[`steps-item__content--${parentData.direction}`]"
			:style="[contentStyle]">
			<text class="steps-item__content__title" :style="{
				color: parentData.current == index ? '#2979ff' : '#606266',
				fontSize: parentData.current == index ? '28rpx' : '26rpx',
				lineHeight: '40rpx'
			}">{{ title }}</text>
			<slot name="desc" class="steps-item-slot-desc">
				<text class="steps-item__content__desc" style="color: #909399; font-size: 24rpx;">{{ desc }}</text>
			</slot>
		</view>
	</view>
</template>

<script>
	import mixin from './mixin/mixin'
	export default {
		name: 'steps-item',
		mixins: [mixin],
		props: {
			title: String,
			desc: String,
			error: Boolean
		},
		data() {
			return {
				index: 0,
				childLength: 0,
				size: {
					height: 0,
					width: 0
				},
				parentData: {
					direction: 'row',
					current: 0,
					activeColor: '#2979ff',
					inactiveColor: '#c0c4cc',
					activeIcon: '',
					inactiveIcon: '',
					dot: false
				}
			}
		},
		created() {
			this.init()
		},
		computed: {
			lineStyle() {
				const style = {}
				if (this.parentData.direction === 'row') {
					// 水平方向连线
					style.left = '50%'
					style.top = '20rpx'
					style.width = `calc(100% - 40rpx)`
					style.transform = 'translateX(-50%)'
				} else {
					// 垂直方向连线
					style.left = '20rpx'
					style.top = '40rpx'
					style.height = `calc(100% - 40rpx)`
				}
				style.backgroundColor = this.statusColor
				return style
			},
			statusClass() {
				const {
					index,
					error
				} = this
				const {
					current
				} = this.parentData
				if (current == index) {
					return error === true ? 'error' : 'process'
				} else if (error) {
					return 'error'
				} else if (current > index) {
					return 'finish'
				} else {
					return 'wait'
				}
			},
			statusColor() {
				let color = ''
				switch (this.statusClass) {
					case 'finish':
						color = this.parentData.activeColor
						break
					case 'error':
						color = '#fa3534'
						break
					case 'process':
						color = this.parentData.dot ? this.parentData.activeColor : 'transparent'
						break
					default:
						color = this.parentData.inactiveColor
						break
				}
				return color
			},
			contentStyle() {
				const style = {}
				if (this.parentData.direction === 'column') {
					style.marginLeft = this.parentData.dot ? '4rpx' : '12rpx'
					style.marginTop = this.parentData.dot ? '0rpx' : '12rpx'
				} else {
					style.marginTop = this.parentData.dot ? '4rpx' : '12rpx'
					style.marginLeft = this.parentData.dot ? '4rpx' : '12rpx'
				}
				return style
			}
		},
		mounted() {
			this.parent && this.parent.updateFromChild()
			this.sleep().then(() => {
				this.getStepsItemRect()
			})
		},
		methods: {
			init() {
				// 初始化数据
				this.updateParentData()
				if (!this.parent) {
					return console.error('steps-item必须要搭配u-steps组件使用')
				}
				this.index = this.parent.children.indexOf(this)
				this.childLength = this.parent.children.length
			},
			updateParentData() {
				this.getParentData('steps')
			},
			updateFromParent() {
				this.init()
			},
			getStepsItemRect() {
				// #ifndef APP-NVUE
				this.$uGetRect('.steps-item').then(size => {
					this.size = size
				})
				// #endif

				// #ifdef APP-NVUE
				dom.getComponentRect(this.$refs['steps-item'], res => {
					const {
						size
					} = res
					this.size = size
				})
				// #endif
			},
		}
	}
</script>

<style scoped>
	.steps-item {
		display: flex;
		flex: 1;
		position: relative;
	}

	.steps-item--row {
		flex-direction: column;
		align-items: center;
	}

	.steps-item--column {
		flex-direction: row;
		justify-content: flex-start;
		padding-bottom: 20rpx;
		min-height: 120rpx;
	}

	.steps-item__wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		background-color: #f1f1f1;
		z-index: 2;
	}

	.steps-item__wrapper--column {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}

	.steps-item__wrapper--column--dot {
		height: 40rpx;
		width: 40rpx;
	}

	.steps-item__wrapper--row {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 16rpx;
	}

	.steps-item__wrapper--row--dot {
		width: 40rpx;
		height: 40rpx;
	}

	.steps-item__wrapper__circle {
		width: 40rpx;
		height: 40rpx;
		box-sizing: border-box;
		border-radius: 50%;
		border-width: 2rpx;
		border-color: #f1f1f1;
		border-style: solid;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.steps-item__wrapper__circle__text {
		color: #f1f1f1;
		font-size: 22rpx;
		line-height: 22rpx;
	}

	.steps-item__wrapper__circle__icon {
		font-size: 24rpx;
		color: #2979ff;
		font-weight: bold;
	}

	.steps-item__wrapper__dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #606266;
	}

	.steps-item__wrapper__icon__text {
		font-size: 32rpx;
	}

	.steps-item__content {
		display: flex;
		flex-direction: column;
		z-index: 2;
	}

	.steps-item__content--row {
		align-items: center;
		text-align: center;
	}

	.steps-item__content--column {
		flex: 1;
		align-items: flex-start;
	}

	.steps-item__content__title {
		font-weight: 500;
	}

	.steps-item__content__desc {
		margin-top: 8rpx;
		color: #909399;
		font-size: 24rpx;
		line-height: 36rpx;
	}

	.steps-item__line {
		position: absolute;
		z-index: 1;
	}

	/* 水平方向连线 */
	.steps-item__line--row {
		height: 2rpx;
	}

	/* 垂直方向连线 */
	.steps-item__line--column {
		width: 2rpx;
	}
</style>